<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>游戏清单 - 待玩游戏管理</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <header>
        <h1>🎮 待玩游戏清单</h1>
        <div class="constellation-container">
            <label for="constellation-select">选择你的星座：</label>
            <select id="constellation-select">
                <option value="1">白羊座 (3.21-4.19)</option>
                <option value="2">金牛座 (4.20-5.20)</option>
                <option value="3">双子座 (5.21-6.21)</option>
                <option value="4">巨蟹座 (6.22-7.22)</option>
                <option value="5">狮子座 (7.23-8.22)</option>
                <option value="6">处女座 (8.23-9.22)</option>
                <option value="7">天秤座 (9.23-10.23)</option>
                <option value="8">天蝎座 (10.24-11.22)</option>
                <option value="9">射手座 (11.23-12.21)</option>
                <option value="10">摩羯座 (12.22-1.19)</option>
                <option value="11">水瓶座 (1.20-2.18)</option>
                <option value="12">双鱼座 (2.19-3.20)</option>
            </select>
            <button id="get-horoscope-btn">获取运势</button>
        </div>
        <div class="horoscope-result" id="horoscope-result"></div>
    </header>
    <main>
        <div class="todo-form">
            <input id="todo-input" placeholder="添加新的游戏..." type="text">
            <select id="priority-select">
                <option value="low">休闲游戏</option>
                <option selected value="medium">一般优先级</option>
                <option value="high">必玩大作</option>
            </select>
            <input id="due-date-input" placeholder="计划游玩日期" type="date">
            <button id="add-button">添加游戏</button>
        </div>
        <div class="filters">
            <button class="filter-btn active" data-filter="all">全部游戏</button>
            <button class="filter-btn" data-filter="active">未玩</button>
            <button class="filter-btn" data-filter="completed">已玩</button>
            <button class="filter-btn" data-filter="high">必玩大作</button>
        </div>
        <ul id="todo-list"></ul>
    </main>
    <footer>
        <div class="progress-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        <p><span id="task-count">0</span> 个游戏，<span id="completed-count">0</span> 个已玩</p>
        <!-- 添加缺失的任务计数元素 -->
        <div class="task-stats">
            <p>总游戏数: <span class="stat-number" id="total-tasks">0</span></p>
            <p>已完成: <span class="stat-number" id="completed-tasks">0</span></p>
        </div>
    </footer>
</div>
<script src="app.js"></script>
</body>
</html>